<template>
  <div className="article-container">
    <!--查询条件卡片-->
    <el-card class="filter-card">
      <div slot="header" class="clearfix">
        <!--面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--查询条件-->
      <el-form ref="form" label-width="50px" size="small">
        <el-form-item label="状态">
          <!--
            el-radio 默认吧 label 作为文本和选中后的 value
          -->
          <el-radio-group v-model="status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="channelId" placeholder="请选择频道">
            <el-option label="全部" :value="null"/>
            <!--使用v-for遍历频道列表-->
            <el-option
              :label="channel.name"
              :value="channel.id"
              v-for="(channel, index) in channels"
              :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="rangeDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <!--disabled:文章列表在loading的时候禁用查询按钮-->
          <el-button
            type="primary"
            :disabled="loading"
            @click="loadArticles(1)">查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--数据表格卡片-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        根据筛选条件共查询到{{ totalCount }}条结果
      </div>
      <!--数据表格-->
      <!--
        Table 表格组件
        1. 把需要展示的数组列表数据绑定到 table 组件的 data 属性
          注意：不需要使用 v-for 遍历，表格组件内部会自动遍历
        2. 设置表格列 el-table-column
          width 可以设置表格列的宽度
          label 可以设置列的标题
          prop 用于设置要渲染的列表项数据字段
      -->
      <el-table
        class="list-table"
        :data="articles"
        stripe style="width: 100%"
        size="medium"
        v-loading="loading"
      >
        <el-table-column prop="date" label="封面">
          <template slot-scope="scope">
            <!--封面图片-->
            <img v-if="scope.row.cover.images && scope.row.cover.images[0]" class="article-cover" :src="scope.row.cover.images[0]" alt=""/>
            <!--暂无图片-->
            <img v-else class="article-cover" src="./no-cover.gif" alt=""/>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <!--
          关于element的表格自定义列模板，参考文档：https://element.eleme.cn/#/zh-CN/component/table
          通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
          row: 数据对象
          $index: 遍历到的数据项的索引
        -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            <!--使用element的Tag标签组件美化状态列的展示-->
            <el-tag :type="articleStatus[scope.row.status].type">
              {{ articleStatus[scope.row.status].text }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <!--如果需要自定义表格列模板，则把需要自定义的内容放到 template 里面-->
          <template slot-scope="scope">
            <!--编辑按钮-->
            <!--
              关于路径参数拼接：'/publish?id=' + scope.row.id
              任何数据和字符串用+号拼接都会自动toString，
              所以这里scope.row.id.toString()无需调用toString()方法
            -->
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push('/publish?id=' + scope.row.id)"
            />
            <!--删除按钮-->
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="onDeleteArticle(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--
        分页:使用 @current-change 事件来监听当前页的变化
        disabled: 文章列表数据在loading的时候禁用分页组件
      -->
      <el-pagination
        layout="prev, pager, next"
        background
        :total="totalCount"
        :disabled="loading"
        :current-page="page"
        @current-change="onCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { deleteArticle, getArticleChannels, getArticles } from '@/api/article'

export default {
  name: 'ArticleIndex',
  components: {},
  props: {},
  data () {
    return {
      articles: [],
      totalCount: 0,
      articleStatus: [
        {
          status: 0,
          text: '草稿',
          type: 'warning'
        },
        {
          status: 1,
          text: '待审核',
          type: ''
        },
        {
          status: 2,
          text: '审核通过',
          type: 'success'
        },
        {
          status: 3,
          text: '审核失败',
          type: 'danger'
        },
        {
          status: 4,
          text: '已删除',
          type: 'info'
        }
      ],
      status: null, // 文章状态，传null表示不传，默认查全部
      channels: [], // 文章频道列表
      rangeDate: [], // 日期范围
      channelId: null, // 频道id
      loading: true, // 文章列表加载 loading
      page: 1 // 当前页码
    }
  },
  computed: {},
  watch: {},
  created () {
    // 获取文章频道列表
    this.loadArticleChannels()
    // 获取文章列表分页数据，默认加载第1页
    this.loadArticles(1)
  },
  mounted () {
  },
  methods: {
    loadArticles (page = 1) {
      // 文章开始加载前展示loading状态
      this.loading = true
      getArticles({
        page,
        perPage: 10,
        status: this.status,
        // 清空日期查询报错解决：先做非空判断再取值
        begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
        end_pubdate: this.rangeDate ? this.rangeDate[1] : null,
        channel_id: this.channelId
      }).then(res => {
        const {
          results,
          // total_count 是后端接口返回的参数名
          // 但是js代码格式规范要求名称中不能使用下划线
          // 所以将 total_count 重命名为 totalCount
          total_count: totalCount
        } = res.data.data
        this.articles = results
        this.totalCount = totalCount
        // 文章加载完毕，关闭loading状态
        this.loading = false
      })
    },

    // 加载文章频道列表
    loadArticleChannels () {
      getArticleChannels().then(res => {
        console.log(res.data.data.channels)
        this.channels = res.data.data.channels
      })
    },

    onCurrentChange (page) {
      this.loadArticles(page)
    },

    // 删除文章
    onDeleteArticle (articleId) {
      this.$confirm('确定删除吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArticle(articleId).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          // 删除成功，刷新【当前页】文章列表
          this.loadArticles(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.filter-card {
  margin-bottom: 20px;
}

.list-table {
  margin-bottom: 20px;
}

.article-cover {
  width: 50px;
  background-size: cover;
}
</style>
